Pointers (iPadOS)

hr.icon

iPadOSは、iPadでポインティングデバイスを使用する際の体験を向上させる、ダイナミックなポインターの効果と動作を提供します。

人々がポインティングデバイスを使うと、iPadOSはポインターを現在の状況に自動的に適応させ、豊かな視覚的フィードバックと、生産性の向上と一般的なタスクの簡素化に必要な適切なレベルの精度を提供します。

iPadOSのポインティングシステムは、アプリケーションやコンテンツを操作するための新たな方法を提供するものであり、タッチ操作に取って代わるものではありません。

タッチ操作だけを使い続ける人もいれば、ポインターやその両方を使いたい人もいるでしょう。

アプリとのインタラクション方法を選択してもらい、インターフェイスを凝縮したり、ポインターを使用しなければならないような変更を加えたりすることは避けてください。

Enabling Pointer Interactions

タッチ、ポインティングデバイス、キーボードのいずれを使用している場合でも、一貫したエクスペリエンスを提供することを目指します。

ユーザーは、タッチ操作と接続された入力デバイスの間を流動的に行き来する傾向があり、各モードや使用するアプリごとに異なるインタラクションを学ぶことはありません。

接続されたデバイスで使い慣れたジェスチャーを使ったときに、アプリ内のすべてのリージョンが正しく反応するようにします。

たとえば、画面上で指をスワイプすることでコンテンツを操作できる場合、トラックパッド上で2本の指を使ったり、ポインターでクリックしたりドラッグしたり、マウスホイールを動かしたりして同じ動作をさせることに意味があるかどうかを検討します。

アプリ内のオブジェクトを操作するときに修飾キーを押したままにすると、一貫したエクスペリエンスが得られます。

たとえば、Optionキーを押しながらオブジェクトをドラッグすると、そのオブジェクトが複製される場合、タッチでドラッグしてもポインターでドラッグしても結果は同じになります。

ポインターと指の入力を区別するのは、それが価値をもたらす場合のみです。

例えば、スクラバーを使えば、ポインターを使っている人がビデオの中の特定の場所を狙うための追加の方法を提供できます。

このシナリオでは、ポインタでもタッチでもプレイヘッドをドラッグできますが、ポインタではホバーして正確なシーク先をクリックすることができます。

自動的に最小化やフェードアウトするコントロールを、ホバーで表示したり隠したりすることができます。

例えば、最小化されたSafariのツールバーにポインタを合わせると、ツールバーが表示されます（ポインタを離すとツールバーは再び最小化されます。）

また、フルスクリーンのビデオを見ているときにポインタを重ねると、再生コントロールの表示/非表示を切り替えることができます。

https://gyazo.com/e862be2825182483680282fe1f752c39

カスタムビューで必要に応じて複数選択ができるようになりました。

iPadOS 15以降では、ポインターを複数のアイテムの上でクリック＆ドラッグすると、それらのアイテムを選択できます。

この方法でポインターを使用すると、ポインターが拡大して表示され、その中にあるアイテムが選択されます。

標準の非リストコレクションビューは、デフォルトでこのインタラクションをサポートしています。カスタムビューで複数選択をサポートしたい場合は、自分で実装する必要があります。

Pointer Shape and Content Effects

iPadOSは、ポインターとその上に置かれた要素の両方の外観と動作を統合し、人々がターゲットとしているアイテムに焦点を当てます。

システムが提供するポインターの効果をサポートすることも、アプリに合わせて変更することもできます。

デフォルトでは、ポインターの形状は円ですが、特定の要素や領域にカーソルを合わせたときに、システムで定義された形状やカスタム形状を表示することができます。

例えば、テキスト入力エリアにカーソルを置くと、ポインターは自動的に見慣れたIビームの形状を使用します。

https://gyazo.com/120964f5baa14399b31d194bec8e6e9e

「コンテンツ効果」では、ポインターの下にあるUI要素や領域も、ポインターがその上に乗ったときに外観を変えることができます。

コンテンツエフェクトの種類に応じて、ポインターは現在の形状を維持するか、要素の新しい外観と一体化した形状に変形します。

iPadOSでは、アプリ内のさまざまなタイプのインタラクティブ要素にフォーカスを当てるために、ハイライト、リフト、ホバーという3つのコンテンツエフェクトが定義されています。

「ハイライト効果」では、ポインターが半透明の丸みを帯びた長方形に変わり、コントロールの背景として機能し、緩やかな視差が生じます。

繊細なハイライトと動きは、人々の作業を妨げることなく、コントロールに焦点を当てます。

iPadOSのデフォルトでは、バーボタン、タブバー、セグメント化されたコントロール、エディットメニューにハイライト効果が適用されます。

https://gyazo.com/e414143bf41fa550f31f5bb0add1318f

「リフトエフェクト」は、微妙な視差と高さのある外観を組み合わせて、要素が画面の上に浮かんでいるように見せる効果です。

ポインターが要素の下でフェードアウトすると、iPadOSは要素を拡大しながら、要素の下にシャドウを、上にソフトなスペキュラハイライトを追加することで、浮き上がるような錯覚を起こします。

デフォルトでは、iPadOSはアプリケーションのアイコンとコントロールセンターのボタンにリフトエフェクトを適用します。

https://gyazo.com/d3520e5d21ea8ea20ba23ad9a7f26bce

「ホバー」は、ポインターが要素の上に乗ったときに、その要素にカスタムのスケール、色合い、またはシャドウの値を適用できる一般的なエフェクトです。ホバーエフェクトは、カスタム値を組み合わせてアイテムにフォーカスを当てますが、デフォルトのポインター形状は変形しません。

https://gyazo.com/e11629d8f2651bad72e961aea20887cc

Providing Pointer Accessories

ポインターアクセサリとは、ポインターを使って現在のUI要素を操作する方法を理解してもらうための視覚的な指標です。

たとえば、サイズ変更可能な要素に近づいたポインターは、その要素が特定の軸に沿ってサイズ変更可能であることを示す小さな矢印を表示することができます。

ポインターの形状やコンテンツの効果とは異なり、アクセサリは、追加情報を伝えるために任意のポインターと組み合わせることができる二次的なアイテムです。

カスタムアクセサリーの作成には、明確でシンプルなイメージを使用してください。

ポインターのアクセサリは小さいので、ポインターとのインタラクションを伝えるためには、あまり詳細な情報を使わずに画像を作成することが重要です。

要素の状態や動作の変化を知らせるために、アクセサリーの遷移を使用することを検討してください。

ポインターのアクセサリーの出現・消失をアニメーション化するだけでなく、コンテンツの効果に伴うアクセサリーの形状や位置の遷移をアニメーション化することもできます。

例えば、ポインターのアクセサリーがプラスのシンボルからノーのシンボルに変わることで、追加アクションが利用できなくなったことを伝えることができます。

Pointer Magnetism

iPadOSでは、要素がポインターを引き寄せるように見えることで、ポインターを使って要素を狙うことができます。

ポインターを要素に近づけたり、要素に向かってポインターをフリックしたりすることで、この磁気効果を体験できます。

ポインターを要素に近づけると、ポインターが要素のヒット領域に到達した時点で、システムはポインターの形状を変形させ始めます。

要素のヒット領域は通常、要素の可視範囲を超えているため、ポインターが要素に触れる前に変形が始まり、あたかも要素がポインターを引っ張っているような錯覚に陥ります。

https://gyazo.com/8575d31d3e5e040842559249e3c3ac25

人がポインターを要素に向けてフリックすると、iPadOSはポインターの軌跡を検証して、ターゲットになりそうな要素を見つけ出します。

ポインターの軌跡の中に要素があると、システムは磁力を使ってポインターを要素の中心に引き寄せます。

iPadOSのデフォルトでは、リフト効果（アプリアイコンなど）とハイライト効果（バーボタンなど）を使う要素には磁力が適用されますが、ホバーを使う要素には適用されません。

ホバーを使用する要素では、デフォルトのポインターの形状が変化しないため、磁気を追加すると違和感があり、ポインターをコントロールできなくなったように感じられる可能性があります。

このシステムでは、テキスト入力エリアにも磁気を適用しています。

テキストを選択しているときに意図しない垂直方向の動きをしても、別の行に飛ばされるのを防ぐことができます。

Supporting Standard Pointers and Effects

可能な限り、システムが提供するコンテンツの効果を有効にしてください。

人々は、システム全体で目にするコンテンツ効果にすぐに慣れ、一般的にはその経験が自分の使用するアプリケーションにも適用されると考えます。

一貫したユーザーエクスペリエンスを提供するために、それぞれの効果の設計意図に従ってください。具体的には

背景が透明な小さな要素にはハイライトを使用する。

背景が不透明な小さな要素にはリフトを使用する。

標準的なボタンやテキスト入力エリアでは、システムが提供するポインターの外観を優先します。

ポインターが期待通りの動作をすることで、ユーザーが安心してアプリを使用できるようになります。

インタラクティブ要素の周囲にパディングを追加して、快適なヒット領域を作成します。

要素のヒット領域の適切なサイズを決定するために、実験が必要な場合があります。

ヒットリージョンが小さすぎると、要素を操作するときに、より正確に操作しなければならないと感じてしまうことがあります。

一方、要素のヒットエリアが大きすぎると、ポインタを要素から離すのに大変な労力を要するように感じられます。

一般に、ベゼルを含む要素には約12ポイント、ベゼルのない要素には約24ポイントのパディングを要素の可視領域に入れると効果的です。

https://gyazo.com/18f389987cf574b366ed8f15a9dba67e

https://gyazo.com/6cba05246454c3be86500d9dfb38e8c7

https://gyazo.com/38c9c1785c13ff5e76d7a98ec90974db

カスタムバーボタンのヒット領域を連続して作成する。

バーの隣り合うボタンのヒット領域の間にスペースがあると、ボタン間を移動する際にポインタが一時的にデフォルトの形に戻る際に、気になる動きをすることがあります。

リフト効果を受ける非標準要素のコーナー半径を指定する。

システムが提供するリフト効果では、ポインターがフェードアウトする際に、要素の形状に合わせて変形します。

デフォルトでは、ポインターはシステムで定義されたコーナー半径を使用して、丸みを帯びた長方形に変形します。

ポインターが要素の形状に合わせてシームレスにアニメーションするために、要素が円などの異なる形状の場合は、半径を指定する必要があります。

Customizing Pointer Shapes and Effects

標準的な要素と同様に動作するカスタム要素では、システムが提供するポインタ効果を優先します。

カスタム要素が標準要素と同じように動作する場合、人々は一般的に、慣れ親しんだポインタの相互作用を使ってその要素を操作することを期待します。

例えば、カスタムナビゲーションバーのボタンに標準のハイライト効果が使われていないと、壊れていると思われてしまいます。

アプリ全体で一貫した方法でポインタ効果を使用します。

たとえば、絵を描くためのアプリであれば、アプリ内のすべての描画領域で同様のポインタ体験を可能にし、ある領域で得た知識を他の領域にも適用できるようにします。

無償のポインターとコンテンツの効果を作らないようにします。

人は、ポインターやその下にある UI 要素の外観が変化すると気付き、その変化が有益なものであることを期待します。

純粋に装飾的なポインター効果を作成すると、実用的な価値を提供することなく、人々の注意をそらしたり、苛立たせたりすることがあります。

カスタムポインターの形状はシンプルにしましょう。

ポインターの形状は、人々が現在の状況で取ることのできるアクションを、それ自体にあまり注意を払わずに示すのが理想的です。

カスタムポインターの形状をすぐに理解できなければ、その形状が何を意味しているのかを知るために時間を費やすことになるでしょう。

有用な情報を提供するカスタムアノテーションを表示することで、ポインターの操作性を向上させることを検討してください。

例えば、アプリ内のグラフ表示部分にポインターが重なったときに、XとYの値を表示することができます。

Keynoteでは、アノテーションを使って、サイズ変更可能な画像の現在の幅と高さを表示しています。

https://gyazo.com/c1c53b0f4099353cfb17bf176fb8f084

ポインターを使った説明文の表示は避けてください。

ポインターに説明文が表示されていると、アプリが複雑で使いにくいものに見えてしまいます。

ポインターを使っても、画面を触っても、アプリの使い方がすぐにわかるように、説明文を表示するのではなく、わかりやすさとシンプルさを優先したインターフェイスにしましょう。

カスタムホバーエフェクトを定義する際は、シャドウ、スケール、要素の間隔の相互作用を考慮してください。

一般的に、スケーリングは、近くの要素を圧迫することなくサイズを拡大できる要素に使用します。

例えば、テーブルの行は、隣の行と重ならないように拡大することができないため、スケーリングはうまく機能しません。

周りにほとんどスペースがない要素には、スケールとシャドウではなく、色合いを含むホバー効果の使用を検討してください。

スケールを含まずにシャドウを使用すると、うまくいかないことに注意してください。

スケールされていない要素は、そのシャドウによって画面よりも高くなっているように見えても、視聴者に近づいているようには見えないからです。